<template>
  <div class="content-view">
    <!-- // 2021/3/11 统一样式 -->
    <div
      v-for="(item,index) in files"
      :key="item.path">
      <p
        class="file-box"
        :title="item.fileName">
        <a @click="onPreview(index)">{{ item.fileName }}</a>
        <i
          v-download="getDownLoadUrl(item.url)"
          class="el-icon-download"
          title="下载" />
      </p>
    </div>

    <!-- <div
      v-for="(item,index) in files"
      :key="item.path"
      class="file-view">
      <div class="file-icon">
        <svg-icon
          :icon-class="item.fileType"
          :class-name="item.fileType" />
      </div>
      <p
        class="file-name"
        :title="item.fileName">
        {{ item.fileName }}
      </p>
      <p class="file-btns">
        <i
          v-download="getDownLoadUrl(item.url)"
          class="el-icon-download"
          title="下载" />
        <i
          v-if="showRemove"
          class="el-icon-delete"
          title="删除"
          @click="onRemove(index)" />
        <i
          class="el-icon-view"
          title="预览"
          @click="onPreview(index)" />
      </p>
    </div> -->
    <template v-if="reviewFile">
      <preview-file
        :file="reviewFile"
        @closePreview="closePreview" />
    </template>
  </div>
</template>
<script>
  export default {
    name: 'FileList',
    props: {
      /**  url：文件路径
       */
      fileData: {
        type: Array,
        required: true
      },
      showRemove: {
        type: Boolean,
        default: () => true
      }
    },
    data() {
      return {
        fileTypes: {
          txt: 'txt',
          doc: 'word',
          docx: 'word',
          png: 'img',
          img: 'img',
          gif: 'img',
          xlsx: 'xlsx',
          xls: 'xlsx',
          rar: 'rar',
          zip: 'rar',
          pdf: 'pdf',
          ppt: 'ppt',
          other: 'other',
          jpeg: 'img',
          jpg: 'img'
        },
        reviewFile: null, // 预览文件
        files: []
      }
    },
    watch: {
      fileData: {
        handler: function(val, oldVal) {
          this.files = this.fileData.map((item) => {
            const suffixIndex = item.url.lastIndexOf('.')
            const suffixName = item.url.substr(suffixIndex + 1)
            const fileName = item.url.substr(item.url.lastIndexOf('\/') + 1, suffixIndex)
            item.fileType = this.fileTypes[suffixName] ? this.fileTypes[suffixName] : this.fileTypes.other
            item.fileName = fileName
            return item
          })
        },
        immediate: true
      }
    },
    methods: {
      getDownLoadUrl(url) {
        return `${process.env.VUE_APP_ADMIN_API}/${url}`
      },
      onRemove(index) {
        this.files.splice(index, 1)
        this.$emit('onRemove', this.this.files)
      },
      onPreview(index) {
        this.reviewFile = this.files[index]
      },
      closePreview() {
        this.reviewFile = null
      }
    }
  }
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.content-view{
  overflow: hidden;
}

.file-view {
  display: flex;
  float: left;
  margin: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0 4px;
  justify-content: space-around;
  align-items: center;
  width: 242px;
  & > .file-icon {
    .svg-icon {
      width: 40px;
      height: 40px;
      margin-right: 8px;
    }
  }
  & .file-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    flex-grow: 1;
  }
  & .file-btns {
    font-size: 18px;
    // width: 100px;
    flex-shrink: 0;
    color: $menuActiveText;
    padding-right: 10px;
    > i {
      cursor: pointer;
      padding: 0 2px;
    }
  }
}
// 2021/3/11 统一样式
.file-box{
   margin: 0;
   font-size: 12px;
    color: #1890ff;
    cursor: pointer;
  i{
    margin-left: 10px;
  }
}
</style>
